<template>
    <view class="top-10">
        <!-- <view class="headTitle left-15 flex" v-if="list.length > 0">
            <text class="point bg-theme right-5"></text>
            <view><text>各楼栋一房一价</text></view>
        </view> -->
        <view class="components top-5 bottom-10">
            <block v-for="(item,index) in list" :key="index">
                <view class="buildingItemWrap boxShow right-10" :class="list.length > 1 ? 'moreImgSty':'onlyoneSty'">
                    <view class="headWrap border-bottom-grey fontBold">
                        <view class="titleWrap flex">
                            <text class="font20 right-10">{{ item.house.building=='全部'?item.house.building:item.house.building+'#' }}</text>
                            <text>总价:{{ item.house.amount.min?`${Math.round(item.house.amount.min)}-${Math.round(item.house.amount.max)}万`:'--' }}</text>
                        </view>
                        <view v-if="item.house.special.min">
                            <block v-if="Math.round(item.house.special.min) === Math.round(item.house.special.max)">
                                非标价格:{{ Math.round(item.house.special.min) }}万
                            </block>
                            <block v-else>
                                非标价格:{{ Math.round(item.house.special.min) }}-{{ Math.round(item.house.special.max) }}万
                            </block>
                        </view>
                    </view>
                    
                    <!-- <block v-for="(houseItem, houseIndex) in item.house.evaluate" :key="houseIndex">
                        <view class="houseTypeTxt font12 top-5">
                            {{ houseItem.unit }}单元 户型评测:<block v-if="houseItem.rooms.length > 0">（
                                <block v-for="(roomItem, roomIndex) in houseItem.rooms" :key="roomIndex">
                                    {{ '0'+roomItem.room }}室:<text :class="{'col-link underline':roomItem.evaluate_id}" @click="toEvaluationDetail(roomItem.evaluate_id)">{{ roomItem.type?roomItem.type:roomItem.size+'m²' }};</text>
                                </block>）
                            </block>
                        </view>
                    </block> -->
                    
                    <image class="priceImg top-10" :src="item.url" mode="widthFix" :lazy-load="true" @click="previewImages(index)"></image>
                </view>
            </block>
        </view>
    </view>
</template>
<script>
	export default {
		data() {
			return {
			};
		},
		props: {
		    list: {
		        type: Array,
		        default: () => ([])
		    },
            productId: {
                type: [Number, String],
                default: ''
            },
            kaiId: {
                type: [Number, String],
                default: ''
            }
		},
		methods: {
            //跳转户型评测详情
            toEvaluationDetail(id) {
                if(!id) return;
                uni.navigateTo({
                	url: `/pages/product/house-type/detail/page?productId=${this.productId}&sizeId=${id}&kaiId=${this.kaiId}`
                })
            },
            
            // 预览图片
            previewImages(index){
            	uni.previewImage({
            		current: index,
            		urls: this.list.map(item => item.url),
            		longPressActions: {
            			itemList: ['发送给朋友', '保存图片', '收藏']
            		}
            	})
            }
		}
	}
</script>

<style scoped lang="scss">
    .headTitle{
        justify-content: flex-start;
        .point{
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
        }
    }
	.components{
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        padding: 10rpx 0;
        .buildingItemWrap{
            border-radius: 40rpx;
            padding: 30rpx 20rpx;
            .headWrap{
                padding-bottom: 10rpx;
                .titleWrap{
                    justify-content: flex-start;
                }
            }
            .houseTypeTxt{
                white-space: pre-wrap;
            }
            .priceImg{
                width: 100%;
            }
        }
        .moreImgSty{
            width: 80%;
            display: inline-block;
            vertical-align: top;
            &:first-child{
                margin-left: 28rpx;
            }
        }
        .onlyoneSty{
            margin: 28rpx;
        }
	}
</style>